import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Link, useLocation, useNavigate } from 'react-router-dom';
//接口地址: http://api.xiaohigh.com/heros/35
export default function HeroDetail() {
  //声明状态
  let [hero, setHero] = useState({});
  //声明变量
  // let id = 99;
  //使用 useParams 获取网页 URL 中的 id 值
  // let {id} = useParams();
  //使用 useSearchParams 获取网页 URL 中的 id 值
  // let [query] = useSearchParams();//解构赋值, 获取返回数组中的第一个元素
  // let id = query.get('id');
  //使用 useLocation 获取列表组件传递的数据
  let res = useLocation();
  let id = res.state.id;

  //发送 AJAX 请求
  useEffect(() => {
    let getData = async () => {
      //发请求
      let result = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      //更新状态
      setHero(result.data);
    }
    getData();
  }, [id]);
  //获取 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="container" style={{padding: 20}}>
      {/* 左侧 */}
      <div className="left col-xs-3" style={{background: '#eee'}}>
        <button className='btn btn-primary' onClick={() => {
          //路由后退
          navigate(-1);
        }}>返回</button>
        <h2>{hero.name}</h2>
        <p className='text-left'>{hero.type}</p>
        <Link to="/hero" state={{
          id: 1
        }}>云樱</Link>
        <div className="row">
          {
            hero.skills && hero.skills.map(item => {
              return <div className="col-xs-3" key={item.name}>
                      <img className='img-responsive' src={"http://cdn.xiaohigh.com" + item.img} alt="" />
                      <p>{item.name}</p>
                    </div>
            })
          }
        </div>
      </div>
      {/* 右侧 */}
      <div className="right col-xs-9">
        <img style={{borderRadius: 0}} className='img-responsive' src={hero.big_image ? "http://cdn.xiaohigh.com" + hero.big_image : ''} alt="" />
        <hr />
        {/* dangerouslySetInnerHTML  dangerous 危险的 set 设置 innerHTML 内部文本 */}
        <p dangerouslySetInnerHTML={{__html: hero.intro}}>
        </p>
      </div>
    </div>
  )
}
